 //sass自定义方法
@mixin setIcon($selector,$len,$w,$h,$hover:false,$mode:0){
    //生成序列化图标背景样式，用于
    //$selector：选择器名称  必填
    //$len:遍历个数  必填
    //$w，$h:图标宽度，高度  必填
    //$mode：0背景图标图片是水平排列，1背景图标图片是垂直排列，默认水平排列
    //$hover：是否添加鼠标悬浮效果样式，默认为不添加
    
    // 生成样例：@include setIcon('html',2,20px,30px,true,0);
    // html0{background-position: 0px 0;}
    // html0:hover{background-position: 0px -30px;}
    // html1{background-position: -20px 0;}
    // html1:hover{background-position: -20px -30px;}
    
    @for $i from 0 to $len{
        @if($mode == 0){
            #{$selector}#{$i}{
                background-position:-$w*$i 0;
            }
            @if($hover == true){
                #{$selector}#{$i}:hover{
                    background-position:-($w*$i) (-$h);
                }   
            } 
        }@else{            
            #{$selector}#{$i}{
                background-position:0 (-$h*$i);
                color:red;
            }
            @if($hover == true){
                #{$selector}#{$i}:hover{
                    background-position:-$w (-$h*$i);
                }   
            }
        }
    }
}



@mixin transition($item:null){
    //生成动画过渡样式
    //styleArr:要实现过渡的样式名称，默认为all,
    //time:过渡时间 默认为0.2s
    //mode:过渡方式 linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
    //delay:过渡延时播放时间:默认为0;
    
    // 生成样例：
    //.transition,.transition *{@include transition((style:all,time:.2s,mode:ease-in-out,delay:0));}
    //.transition, .transition * {
    //     -webkit-transition: all 0.2 ease-in-out;
    //     transition: all 0.2 ease-in-out;
    // }
    
    $tmplist:-webkit-,"";
    @if($item == none){
        @each $k in $tmplist{
            #{$k}transition:none;
        }
    }@else{
        @if($item==null){
            $item:();
        }
        @if(map-get($item,'style')==null){
            $item:map-merge($item,(style:all));
        }
        @if(map-get($item,'time')==null){
            $item:map-merge($item,(time:0.2s));
        }
        @if(map-get($item,'mode')==null){
           $item:map-merge($item,(mode:linear));
        }
        @each $k in $tmplist{
            #{$k}transition:map-get($item,'style') map-get($item,'time') map-get($item,'mode') map-get($item,'delay');
        }
    }
}

@mixin gray(){
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: gray; 
}

 /*单排多出显示省略号*/
 @mixin textellipsis(){
     overflow:hidden;white-space: nowrap;text-overflow: ellipsis;
 }
